<script setup>
import {healthStore} from '@pi/health';
import {userStore} from '@pi/user';
import {reactive, watch} from "vue";
import {input} from "@ut/tool.js";

let health = healthStore();
let user = userStore();
let props = defineProps({
    show: {type: Boolean, default: false},
    id: {type: Number, default: 0}
});
let options = reactive({pageNo: 1, pageSize: 10, grade: 0});
let state = reactive([
    {label: '未评分', value: 0},
    {label: '已评分', value: 1},
])

watch(() => props.show, e => {
    if (e) {
        options.pageNo = 1;
        options.grade = 0;
        options.hid = props.id;
        health.getHs(options);
    }
}, {immediate: true});

// 评分
function open(row) {
    input({
        title: '卫生评分',
        content: '请输入整数分值',
        inputPattern: /^(100|[0-9]{1,2})$/,
        inputErrorMessage: '请输入正确的数值'
    }).then(async grade => {
        let form = {...row, grade};
        delete form.chamber;
        await health.updateHs(form);
        health.getHs(options);
    })
}
</script>

<template>
    <h5 class="title">卫生评分记录</h5>
    <div class="btn">
        <el-select v-model="options.grade" size="small" @change="health.getHs(options)" style="width: 120px">
            <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>
    <el-table :data="health.hsList" style="height: calc(100% - 100px)" size="small" border stripe show-overflow-tooltip>
        <el-table-column prop="id" label="编号" align="center" />
        <el-table-column prop="chamber.building.label" label="楼号" align="center" />
        <el-table-column prop="chamber.label" label="寝室号" align="center" />
        <el-table-column prop="rating" label="等级" align="center" />
        <el-table-column prop="grade" label="评分" align="center" />
        <el-table-column label="操作" align="center" v-if="user.info.role < 2">
            <template #default="{row}">
                <el-button type="primary" link icon="Edit" @click="open(row)">评分</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="health.hsTotal" small @current-change="health.getHs(options)" v-model:current-page="options.pageNo" :page-size="options.pageSize" />
    </div>
</template>

<style scoped lang="less">

</style>